|
1
|
|
|
import { Button, Card, UncontrolledTooltip } from 'reactstrap'; |
|
2
|
|
|
import Moment from 'react-moment'; |
|
3
|
|
|
import React from 'react'; |
|
4
|
|
|
import PropTypes from 'prop-types'; |
|
5
|
|
|
import { ExternalLink } from 'react-external-link'; |
|
6
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
|
7
|
|
|
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'; |
|
8
|
|
|
import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount'; |
|
9
|
|
|
import { shortUrlDetailType } from './reducers/shortUrlDetail'; |
|
10
|
|
|
import { shortUrlVisitsType } from './reducers/shortUrlVisits'; |
|
11
|
|
|
import './VisitsHeader.scss'; |
|
12
|
|
|
|
|
13
|
2 |
|
const propTypes = { |
|
14
|
|
|
shortUrlDetail: shortUrlDetailType.isRequired, |
|
15
|
|
|
shortUrlVisits: shortUrlVisitsType.isRequired, |
|
16
|
|
|
goBack: PropTypes.func.isRequired, |
|
17
|
|
|
}; |
|
18
|
|
|
|
|
19
|
|
|
export default function VisitsHeader({ shortUrlDetail, shortUrlVisits, goBack }) { |
|
20
|
3 |
|
const { shortUrl, loading } = shortUrlDetail; |
|
21
|
3 |
|
const { visits } = shortUrlVisits; |
|
22
|
4 |
|
const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : ''; |
|
23
|
4 |
|
const longLink = shortUrl && shortUrl.longUrl ? shortUrl.longUrl : ''; |
|
24
|
|
|
|
|
25
|
3 |
|
const renderDate = () => ( |
|
26
|
3 |
|
<span> |
|
27
|
|
|
<b id="created" className="visits-header__created-at"><Moment fromNow>{shortUrl.dateCreated}</Moment></b> |
|
28
|
|
|
<UncontrolledTooltip placement="bottom" target="created"> |
|
29
|
|
|
<Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment> |
|
30
|
|
|
</UncontrolledTooltip> |
|
31
|
|
|
</span> |
|
32
|
|
|
); |
|
33
|
|
|
const visitsStatsTitle = ( |
|
34
|
3 |
|
<React.Fragment> |
|
35
|
|
|
Visit stats for <ExternalLink href={shortLink} /> |
|
36
|
|
|
</React.Fragment> |
|
37
|
|
|
); |
|
38
|
|
|
|
|
39
|
3 |
|
return ( |
|
40
|
|
|
<header> |
|
41
|
|
|
<Card className="bg-light" body> |
|
42
|
|
|
<h2 className="d-flex justify-content-between align-items-center"> |
|
43
|
|
|
<Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}> |
|
44
|
|
|
<FontAwesomeIcon icon={faArrowLeft} /> |
|
45
|
|
|
</Button> |
|
46
|
|
|
<span className="text-center d-none d-sm-block"> |
|
47
|
|
|
{visitsStatsTitle} |
|
48
|
|
|
</span> |
|
49
|
|
|
<span className="badge badge-main ml-3"> |
|
50
|
|
|
Visits:{' '} |
|
51
|
|
|
<ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} /> |
|
52
|
|
|
</span> |
|
53
|
|
|
</h2> |
|
54
|
|
|
<h3 className="text-center d-block d-sm-none mb-0">{visitsStatsTitle}</h3> |
|
55
|
|
|
<hr /> |
|
56
|
|
|
<div>Created: {renderDate()}</div> |
|
57
|
|
|
<div> |
|
58
|
|
|
Long URL:{' '} |
|
59
|
|
|
{loading && <small>Loading...</small>} |
|
60
|
|
|
{!loading && <ExternalLink href={longLink} />} |
|
61
|
|
|
</div> |
|
62
|
|
|
</Card> |
|
63
|
|
|
</header> |
|
64
|
|
|
); |
|
65
|
|
|
} |
|
66
|
|
|
|
|
67
|
|
|
VisitsHeader.propTypes = propTypes; |
|
68
|
|
|
|
shlinkio /
shlink-web-client
